<template>
  <view>
    <u-navbar
      is-back="true"
      back-icon-color="#f6f6f6"
      title="用户登录"
      title-color="#f6f6f6"
      :background="navBackground"
    ></u-navbar>
    <view class="wrap">
      <view class="top"></view>
      <view class="content">
        <view class="title">Welcome To 易搭衣橱</view>
        <u-form :model="form" ref="uForm">
          <u-form-item
            label="昵称:"
            label-width="120rpx"
            :left-icon-style="usernameStyle"
            :label-style="usernameStyle"
            left-icon="account-fill"
            prop="username"
          >
            <u-input v-model="form.username" placeholder="请输入用户昵称~" />
          </u-form-item>
          <u-form-item
            label="密码:"
            label-width="120rpx"
            :left-icon-style="passwordStyle"
            :label-style="passwordStyle"
            left-icon="lock-fill"
            prop="password"
          >
            <u-input
              v-model="form.password"
              type="password"
              placeholder="请输入用户昵称~"
            />
          </u-form-item>
        </u-form>
        <u-button @click="submit()" type="success" :ripple="true"
          >登录</u-button
        >
        <view class="alternative">
          <view class="password" @click="toRegister()">注册账号</view>
          <view class="issue" @click="forgetModal">忘记密码？</view>
        </view>
      </view>
      <view class="buttom">
        <view class="loginType">
          <view class="wechat item" @tap="loginByWeChat()">
            <view class="icon">
              <u-icon
                size="70"
                name="weixin-fill"
                color="rgb(83,194,64)"
              ></u-icon>
            </view>
            <view>微信</view>
          </view>
          <view class="QQ item" @click="loginByQQ()">
            <view class="icon">
              <u-icon size="70" name="qq-fill" color="rgb(17,183,233)"></u-icon>
            </view>
            QQ
          </view>
        </view>
        <view class="hint">
          采用第三方平台登录代表您同意并授权使用您的账号信息（如昵称等）
        </view>
      </view>
      <!--忘记密码模态框-->
      <u-modal
        v-model="isForget"
        :mask-close-able="true"
        title="温馨提示"
        content="您可以联系QQ:2889797849,申请重置密码哦~"
      >
      </u-modal>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      navBackground: app.globalData.navBackground,
      tel: '',
      isForget: false,
      usernameStyle: {
        color: '#f2a2dd',
        fontWeight: 'bold',
      },
      passwordStyle: {
        color: '#35e661',
        fontWeight: 'bold',
      },
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户昵称',
          },
          {
            min: 1,
            message: '请输入用户昵称',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入用户密码',
          },
        ],
      },
    };
  },
  computed: {
    inputStyle() {
      let style = {};
      if (this.tel) {
        style.color = '#fff';
        style.backgroundColor = this.$u.color['warning'];
      }
      return style;
    },
  },
  methods: {
    toRegister() {
      uni.navigateTo({
        url: '/pages/user/register',
      });
    },
    checkboxChange: function (e) {
      this.isCheck = e.value;
    },
    loginByWeChat() {
      uni.getUserProfile({
        desc: '获取用户头像和昵称',
        success: (res) => {
          console.log('获取用户信息成功:', res);
          let nickname = res.userInfo.nickName;
          let user_avatar = res.userInfo.avatarUrl;
          app.globalData.avatarUrl = user_avatar;
          app.globalData.nickname = nickname;
          uni.showLoading('登陆中...');
          uni.login({
            provider: 'weixin',
            success: (res) => {
              let code = res.code;
              uni.request({
                url: app.globalData.baseUrl + '/user/login',
                method: 'POST',
                data: {
                  plat_form: 'weixin',
                  code: code,
                  user_name: nickname,
                  user_avatar: user_avatar,
                },
                success: (res) => {
                  uni.hideLoading();
                  let result = res.data;
                  if (result.code == 1000) {
                    app.showToast('登陆成功', 'success');
                    app.globalData.token = result.loginInfo._token;
                    app.globalData.user_id = result.loginInfo.user_id;
                    app.globalData.isLogin = true;
                    uni.setStorage({
                      key: 'globalData',
                      data: app.globalData,
                    });
                    uni.navigateBack({
                      delta: 1,
                    });
                  } else {
                    app.showToast(result.msg);
                  }
                },
                fail: () => {
                  app.showToast('登陆失败，请稍后再试~');
                },
              });
            },
          });
        },
        fail: (err) => {
          console.log('获取用户信息失败：', err.errMsg);
        },
      });
    },
    loginByQQ() {
      app.showToast('暂时还不支持QQ登录哦~');
      return;
    },
    submit() {
      if (!(this.form.username && this.form.password)) {
        app.showToast('请填写用户名和密码~');
        return;
      }
      uni.request({
        url: app.globalData.baseUrl + '/user/login',
        method: 'GET',
        data: {
          plat_form: 'web',
          user_name: this.form.username,
          password: this.form.password,
        },
        success: (res) => {
          let result = res.data;
          if (result.code == 1000) {
            app.showToast('登录成功~', 'success');
            app.globalData.avatarUrl = result.loginInfo.user_avatar;
            app.globalData.nickname = this.form.username;
            app.globalData.token = result.loginInfo._token;
            app.globalData.user_id = result.loginInfo.user_id;
            app.globalData.isLogin = true;
            app.showToast('登录成功~', 'success');
            uni.setStorage({
              key: 'globalData',
              data: app.globalData,
            });
            uni.navigateBack({
              delta: 1,
            });
          } else {
            app.showToast(result.msg);
          }
          console.log('输出数据', res);
        },
        fail: (err) => {
          app.showToast('登录失败，请稍后再试~');
          console.log('web登录失败:', err.errMsg);
        },
      });
    },
    forgetModal() {
      console.log('忘记密码被点击');
      this.isForget = true;
    },
  },
  // onReady() {
  // 	this.$refs.uForm.setRules(this.rules);
  // }
};
</script>

<style lang="scss" scoped>
.wrap {
  font-size: 28rpx;
  .content {
    width: 600rpx;
    margin: 80rpx auto 0;

    .title {
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
      margin-bottom: 200rpx;
      color: #87abf2;
    }

    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 6rpx;
    }

    .tips {
      color: $u-type-info;
      margin-bottom: 60rpx;
      margin-top: 8rpx;
    }

    .getCaptcha {
      background-color: rgb(253, 243, 208);
      color: $u-tips-color;
      border: none;
      font-size: 30rpx;
      padding: 12rpx 0;

      &::after {
        border: none;
      }
    }

    .alternative {
      color: $u-tips-color;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .buttom {
    .loginType {
      display: flex;
      padding: 100rpx 150rpx 80rpx 150rpx;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $u-content-color;
        font-size: 28rpx;
      }
    }

    .hint {
      text-align: center;
      font-size: 20rpx;
      color: #9fec6f;
    }
  }
}
</style>
